<template>
    <div id="my">
      <div class="bg" style=""></div>
      <div class="header">
        <!--<img src="../../static/img/nav_bg@3x.png"/>-->
        <div class="user-info">
          <div class="avatar">
            <img src="../../static/img/img_avatar@2x.png"/>
          </div>
          <div class="detail">
            <span>小白菜（UID：123456789）</span>
            <p>账户余额： 2000</p>
          </div>
          <div class="user-level">
            等级：<span>合伙人</span>
          </div>
        </div>
      </div>
      <van-row class="center">
        <van-col span="8" >
          <span>1.23元</span>
          <p>上月结算</p>
        </van-col>
        <van-col span="8" style="border-left:1px solid #ededed;border-right:1px solid #ededed;">
          <span>0.00</span>
          <p>本月预计收入</p>
        </van-col>
        <van-col span="8">
          <span>0.00</span>
          <p>总收入</p>
        </van-col>
      </van-row>
      <van-cell-group>
        <van-cell value="" is-link to="order">
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">我的订单</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <!-- <van-cell value="" is-link>
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">我的订单</span>
          </template>
        </van-cell> -->
        <van-cell value="" is-link to="collection">
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">我的收藏</span>
          </template>
        </van-cell>
        <van-cell value="" is-link to="myroot">
          <template slot="title">
            <img src="../../static/img/icon_scj@3x.png" class="ico" />
            <span class="van-cell-text">我的足迹</span>
          </template>
        </van-cell>
        <van-cell value="" is-link to="myinvate">
          <template slot="title">
            <img src="../../static/img/icon_yj@3x.png" class="ico" />
            <span class="van-cell-text">我的邀请</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell value="" is-link to="">
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">收入提取</span>
          </template>
        </van-cell>
        <van-cell value="" is-link to="">
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">活动记录</span>
          </template>
        </van-cell>
        <van-cell value="" is-link to="income">
          <template slot="title">
            <img src="../../static/img/icon_scj@3x.png" class="ico" />
            <span class="van-cell-text">收入榜单</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
       <!--  <van-cell value="" is-link>
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">我的订单</span>
          </template>
        </van-cell> -->
        <van-cell value="" is-link to="service">
          <template slot="title">
            <img src="../../static/img/icon_cz@3x.png" class="ico" />
            <span class="van-cell-text">我的客服</span>
          </template>
        </van-cell>
        <van-cell value="" is-link to="">
          <template slot="title">
            <img src="../../static/img/icon_scj@3x.png" class="ico" />
            <span class="van-cell-text">使用帮助</span>
          </template>
        </van-cell>
        <van-cell value="" is-link to="">
          <template slot="title">
            <img src="../../static/img/icon_yj@3x.png" class="ico" />
            <span class="van-cell-text">关于我们</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-button type="danger" class="sub">退出登录</van-button>
    </div>
</template>

<script>
    export default {
        name: "my"
    }
</script>

<style scoped lang="less">
  .header {
    background: linear-gradient(to bottom right, #5abdff , #5a9bff); 
    color: #fff;
    p {
      margin: 0;
      margin-top: 1.3rem;
    }
    .user-info {
      padding: .75rem;
      display: flex;
      text-align: left;
      justify-content: space-between;
      .avatar {
        width: 3.56rem;
        height: 3.56rem;
        line-height: 0;
        font-size: 0;
        margin-right: .8rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .detail {
        font-size: .94rem;
        justify-content: space-between;
      }
      .user-level {
        font-size: .8rem;
        span {
          display: inline-block;
          padding: 0 .4rem;
          background-color: #ed9700;
          border-radius: 0.53rem;
          font-size: .7rem;
        }
      }
    }
  }

  .center{
    background: linear-gradient(to bottom right, #6ba1ff , #6b93ff);
    padding:1rem 0;
    color: #ededed;
    border-top:1px solid #6b93ff;
    p{
      margin:0;
      margin-top:0.3rem;
    }
  }

  .van-cell-group {
    margin-bottom: .5rem;
  }
  .ico{
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -3px;
  }
  #my .van-cell__title{
    flex:0.8;
    position: relative;
  }
  #my .van-cell__title>span{
    line-height: 28px;
    font-size: 17px;
    margin-left: 10px;
  }
  #my .van-cell{
    text-align: left;
   }
  .sub{
    width: 90%;
    border-radius: 25px;
    font-size: 18px;
    margin-top:50px;
  }
  .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background:#eeeeee;
    z-index: -2
  }
</style>
